<!DOCTYPE html>
<html>
<head>
<title>查看订单详情</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</head>
<body >
	<header>
		<h1>查看订单详情</h1>
	</header>
	<main>
		<table class="data">
		<thead>
			<tr>
				<th>序号</th>
				<th>商品名称</th>
				<th>商品详情</th>
				<th>商品单价</th>
				<th>收货数量</th>
				<th>订单状态</th>
				
			</tr>
		</thead>
		<tbody v-if="resp===null">
			<tr>
				<td colspan="99">加载中...</td>
			</tr>
		</tbody>
		<tbody v-else-if="resp.code!=='ok'">
			<tr>
				<td colspan="99">{{resp.message}}</td>
			</tr>
		</tbody>
		<tbody v-else >
			<template v-if="resp.data.rows.length">
				<tr v-for="(row,i) in resp.data.rows">
					<td>{{i+1}}</td>
					<td>{{row.product}}</td>
					<td>{{row.productPropertys}}</td>
					<td>{{row.price}}</td>
					<td>{{row.amount}}</td>
					<td>{{row.status}}</td>
			   </tr>
			</template>
			<tr v-else>
				<td colspan="99">很抱歉，未找到相关数据</td>
			</tr>
		</tbody>
		
	</table>
       <p>
         
            <a href="/vip-consume/order.html">返回</a>	
        </p>
</main>

	<script src="/static/js/jquery.js"></script>
	 <script
		src="/static/js/yi.toast.js"></script> 
		<script src="/static/js/vue.js"></script>
		
		<script>
			const vue=new Vue({
				el:"body>main",
				data:{
					e:{
						//TODO 获取id
						id:location.hash.substr(1)
					},
				resp:null
					
				},
				methods:{
					
				},
				created:function(){
					//只读所有input
					
					$.getJSON("/orderItem/select.do",{
						orderId:this.e.id
					},function(resp){
						if(resp.code!=="ok"){
							toast(resp.message);
						}else{
							console.log(resp);
							vue.resp=resp;
						}
					});
					
				}
			});
		
		</script>
</body>
</html>